<template>
    <div class="user-container">
        <div class="menu-bar">
            <div>个人中心</div>
            <div v-for="(item, idx) in menulist" :class="checkIndex === idx ? 'highlight' : ''" :key="idx"
                @click="checkMenu(item.router, idx)" @mouseenter="e => hoverHandler(e, true)"
                @mouseleave="e => hoverHandler(e, false)">{{ item.text }}</div>
        </div>
        <div class="router">
            <router-view></router-view>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const checkIndex = ref<number>(0)
onMounted(() => {
    let url = route.path.split('/').pop()
    let index = menulist.findIndex((item) => item.router === url)
    checkIndex.value = index
})
const menulist = [{
    text: '我的信息',
    router: 'setting'
}, {
    text: '我的头像',
    router: 'avatar'
}, {
    text: '账号安全',
    router: 'security'
}]
const checkMenu = (url: string, idx: number) => {
    checkIndex.value = idx
    router.push(url)
}
const hoverHandler = (event: MouseEvent, enter: boolean) => {
    let ele = event.target as Element
    if (enter) {
        ele.classList.add('graylight')
        return
    }
    ele.classList.remove('graylight')
}
</script>


<style scoped lang="less">
.user-container {
    display: flex;
    height: 600px;
    width: 80%;
    border: 1px solid #ccc;
    border-radius: 8px;
    min-width: 850px;
    margin: 0 auto;

    .menu-bar {
        min-width: 160px;
        height: 100%;
        border-right: 1px solid #ccc;
        background-color: #fafafa;

        div {

            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 50px;

            &:nth-child(n+2):hover {
                cursor: pointer;
            }

            &:first-child {
                user-select: none;
                border-bottom: 1px solid #ccc;
            }
        }

    }

    .graylight {
        background-color: #e1e4ea;
    }

    .highlight {
        background-color: #00a1d7;
        color: #fff;
    }

    .router {
        flex: 1;
        background-color: #fff;
        height: 100%;
        z-index: 10;
    }
}
</style>